<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/aui.2.0.css" />
    <link rel="stylesheet" type="text/css" href="../script/videojs/video-js.css">
    <style type="text/css">
        video::-webkit-media-controls {  
            display:none !important;
        }
    </style>
</head>
<body>
    <section class="aui-content" id="video_list"></section>
    <script id="video_tpl" type="text/html">
        {{# for(var i = 0, len = d.video.length; i < len; i++){ }}
        <div class="aui-card-list aui-border-t aui-border-b">
            <div class="aui-info aui-padded-l-15 aui-padded-r-15">
                <div class="aui-info-item aui-font-size-12">
                    <img src="{{ d.video[i].avatar}}" style="width:1rem" class="aui-img-round" />
                    <span class="aui-margin-l-5">{{ d.video[i].author}}</span>
                </div>
                <div class="aui-info-item">
                    <i class="aui-iconfont aui-icon-more"></i>
                </div>
            </div>
            <div class="aui-card-list-header aui-padded-t-5 aui-padded-b-5">
                {{ d.video[i].title }}
            </div>
            <div class="aui-card-list-content">
                <video id="{{ d.video[i].vid }}" class="video-js vjs-default-skin vjs-big-play-centered" poster="{{ d.video[i].cover }}">
                    <source src="{{ d.video[i].source }}" type="{{ d.video[i].vtype }}"></source>
                </video>
            </div>
            <div class="aui-card-list-content-padded aui-padded-t-0 aui-padded-b-0" style="color:#7b7b7b;">
                {{ d.video[i].desc }}
            </div>
            <div class="aui-card-list-footer aui-font-size-12" style="color:#999;">
                <div>
                    <span>2048 赞</span> - <span>295 评论</span>
                </div>
            </div>
        </div>
        {{# } }}
    </script>
</body>
<script type="text/javascript" src="../script/api.js" ></script>
<script type="text/javascript" src="../script/jquery/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="../script/videojs/video.js"></script>
<script type="text/javascript" src="../script/videojs/video-fullscreen.js"></script>
<script type="text/javascript" src="../script/laytpl/laytpl.js"></script>
<script type="text/javascript">
    var mediaData = {
        "video":[{
            "vid":1,
            "avatar":"../image/demo1.png",
            "author":"匿名用户",
            "title":"测试视频",
            "desc":"测试视频描述...",
            "vtype":"video/mp4",
            "cover":"http://vjs.zencdn.net/v/oceans.png",
            "source":"http://www.w3school.com.cn/i/movie.mp4"
        },{
            "vid":2,
            "avatar":"../image/demo1.png",
            "author":"匿名用户",
            "title":"测试视频",
            "desc":"测试视频描述...",
            "vtype":"video/mp4",
            "cover":"http://vjs.zencdn.net/v/oceans.png",
            "source":"http://www.w3school.com.cn/i/movie.mp4"
        },{
            "vid":3,
            "avatar":"../image/demo1.png",
            "author":"匿名用户",
            "title":"测试视频",
            "desc":"测试视频描述...",
            "vtype":"video/mp4",
            "cover":"http://vjs.zencdn.net/v/oceans.png",
            "source":"http://vjs.zencdn.net/v/oceans.mp4"
        },{
            "vid":4,
            "avatar":"../image/demo1.png",
            "author":"匿名用户",
            "title":"测试视频",
            "desc":"测试视频描述...",
            "vtype":"video/mp4",
            "cover":"http://vjs.zencdn.net/v/oceans.png",
            "source":"http://vjs.zencdn.net/v/oceans.mp4"
        }],
        "image":[]
    };
    apiready = function(){
        api.parseTapmode();
    }
    laytpl(document.getElementById('video_tpl').innerHTML).render(mediaData, function(render){
        document.getElementById('video_list').innerHTML = render;
        initVideoJs();
    });
    function initVideoJs(){
        $('.video-js').each(function(){
            if($(this).hasClass('inited')){
                return ture;
            }
            videojs($(this).attr('id'), {
                width: $('body').width(),
                height:280,
                controls: true,
                preload: "none",
                controlBar: {
                    captionsButton: false,
                    chaptersButton : false,
                    liveDisplay:false,
                    playbackRateMenuButton: false,
                    subtitlesButton:false,
                    fullscreenToggle:false
                  }
            }, function() {
            });
            $(this).addClass('initd');
        });
    }
</script>
</html>